<template>
    <!-- 页面布局盒子 -->
    <div class="home_box">
        <!-- 文章左侧盒子 -->
        <div class="home_left_boxs">
            <!-- <a-card>
                <svg :src="bg"></svg>
            </a-card>
            <br> -->
            <a-card>
                <a-carousel arrows autoplay>
                    <template #prevArrow>
                        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                            <left-circle-outlined />
                        </div>
                    </template>
                    <template #nextArrow>
                        <div class="custom-slick-arrow" style="right: 10px">
                            <right-circle-outlined />
                        </div>
                    </template>
                    <div class="swiperitem" v-for="item in swiperList" :key="item.id" @click="() => toarchdetail(item.id)">
                        <img :src="item.cover" alt="">
                        <div class="swiper_mark">
                            <div>{{ item.title }}</div>
                            <p>{{ Math.abs(dayjs().diff(dayjs(item.createAt), 'day')) }}
                                天前·访问{{ item.views }}次</p>
                        </div>
                    </div>

                </a-carousel>
            </a-card>
            <br />
            <a-card :loading="false" style="width: 100%">
                <div class="home_category">
                    <span style="color: pink;">all</span>
                    <span v-for="item in CategoryList" :key="item.id" @click="() => handeltocate(item.value)">{{ item.label
                    }}</span>
                </div>
            </a-card>
            <div>
                <a-card :loading="false" v-for="item in articleListall" :key="item.id">
                    <div @click="() => handeltoedirs(item.id)" 
                        ref="itemRef" class="item_list_s"
                        >
                        <component :is="Articleitem" :item="item" :id="item.id"></component>
                    </div>
                </a-card>
            </div>
        </div>

        <div class="home_right_boxs">
            <a-card title="推荐阅读" style="width: 300px">
                <div class="right_overf">
                    <div class="recommend_text" v-for="item in recommendList" :key="item.id"
                        @click="() => toarchdetail(item.id)">
                        {{ item.title }} · {{ Math.abs(dayjs().diff(dayjs(item.createAt), 'day')) }} 天前
                    </div>
                </div>
            </a-card>
            <br />
            <a-card title="文章标签" style="width: 300px">
                <div class="right_tag">
                    <button v-for="item in tagList" :key="item.id" @click="() => handeltags(item.value)">
                        {{ item.label }} {{ item.articleCount }}
                    </button>
                </div>
            </a-card>
        </div>
    </div>
</template>

<!-- -->
<script setup lang="ts">
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref, computed, onMounted, getCurrentInstance, ComponentInternalInstance, watch } from "vue";
//引入日期转换装置
import dayjs from 'dayjs'
//引入pinia
import { storeToRefs } from "pinia";
import { useHomes } from "../store/home";
import Articleitem from "../components/articleitem.vue"
import { useRouter } from "vue-router"
import bg from "../assets/atm.jpeg"

let itemRef = ref(null as any);
const observer = ref<IntersectionObserver | null>(null)
let router = useRouter()
//跳转详情页
let toarchdetail = (id: any) => {
    // console.log(id)
    router.push("/archives/" + id)
}

const homes = useHomes()
let recommendList = ref([] as any);
let { articleList, tagList, swiperList, CategoryList, articleListall } = storeToRefs(homes)
//获取所有文章
const { proxy } = getCurrentInstance() as ComponentInternalInstance
homes.getArtitemall()
homes.getArticle()
//获取所有分类
homes.getcategory()
//获取所有标签
homes.gettags()

watch(articleListall, (newval) => {

    newval.slice(0, 6).forEach((item: any, index: number) => {
        setTimeout(() => {
            recommendList.value.push(item)
            proxy!.$forceUpdate() // 通知 Vue 强制更新视图
        }, index * 800);
    })
    observer.value = new IntersectionObserver((entries:any) => {
        entries[0].target.style.opacity=1
      })
})

watch(itemRef,(newval)=>{
    newval.forEach((v:any)=>{
        // console.log(v,"v")
        observer.value?.observe(v)
      })
})
onMounted(() => {
    // if(itemRef)
    // console.log(itemRef,"itemref")
    if(itemRef.value != null){
        // console.log(111)
        // console.log(itemRef,"itemref");
        [...itemRef.value].forEach((v:any)=>{
        // console.log(v,"v")
        observer.value?.observe(v)
      })

      observer.value = new IntersectionObserver((entries:any) => {
        entries[0].target.style.opacity=1
      })
    }
})


//跳转分类搜索
let handeltocate = (id: any) => {
    if (id == "") return
    router.push("/category/" + id)
    // console.log(id)
}
//跳转标签搜索
let handeltags = (id: any) => {
    if (id == "") return
    router.push("/tags/" + id)
    // console.log(id)
}
//文章详情
const handeltoedirs = (id: string) => {
    router.push("/archives/" + id)
}

//创建一个监听对象的实例

























</script>

<style lang="scss">

.item_list_s{
    opacity: 0;
    transition: all 2s;
}




.swiperitem {
    width: 100%;
    height: 360px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .swiper_mark {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #fff;

        div {
            font-size: 26px;
        }
    }
}

.home_box {
    height: 100vh;
    margin: 0 auto;
    overflow: auto;
    display: flex;
    justify-content: center;

    .home_left_boxs {
        flex: 1;
        min-width: 500px;
        max-width: 900px;
        margin-right: 15px;
        background: none;

    }

    .home_right_boxs {
        width: 320px;
        height: 100vh;
        background: none;
        position: sticky;
        top: 0;
        right: 0;

        .right_overf {
            width: 100%;
            overflow: hidden;
        }

        .recommend_text {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 6px 0;
            animation: textrightx 0.8s;
            cursor: pointer;

            &:hover {
                color: pink;
            }
        }
    }

    &::-webkit-scrollbar {
        display: none;
    }
}

.home_category {
    display: flex;
    flex-wrap: wrap;

    span {
        margin: 5px;
        cursor: pointer;
    }

    span:hover {
        color: pink;
    }
}

//隐藏滚动条
html::-webkit-scrollbar {
    display: none;
}

.right_tag {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    button {
        padding: 3px 5px;
        margin: 5px;
        background: none;
        border: none;
        border: 1px solid #ccc;
        outline: none;
        cursor: pointer;

        &:hover {
            border: 1px solid #a61851;
        }
    }
}

@keyframes textrightx {
    0% {
        transform: translate(-100%);
    }

    100% {
        transform: translate(0);
    }
}</style>